<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getAddressInfoApi, updateAddressInfoApi, addAddressInfoApi } from '@/apis/address';

// 表单数据
const form = ref({
  name: '', // 收货人
  phone: '', // 联系方式
  province: '', // 省
  city: '', // 城市
  region: '', // 区/县
  detailAddress: '', // 详细地址
  defaultStatus: 1, // 默认地址，0为是，1为否
})

// 接收参数
const query = defineProps<{
  id?:number
}>()

// 有id获取回显数据
const getAddressInfoData = async() => {
  if(query.id){
    const res = await getAddressInfoApi(query.id)
    Object.assign(form.value, res.data)
  }
}

// 收集所在地区
const onRegionChange: UniHelper.RegionPickerOnChange = (ev) => {
  // 省市区(前端展示)
  form.value.province = ev.detail.value[0]
  form.value.city = ev.detail.value[1]
  form.value.region = ev.detail.value[2]
}

// 收集是否默认收货地址
const onSwitchChange: UniHelper.SwitchOnChange = (ev) => {
  form.value.defaultStatus = ev.detail.value ? 0 : 1
}

// 数据校验
const rules:UniHelper.UniFormsRules = {
  name: {rules:[{required:true,errorMessage:'请输入收货人姓名'}]},
  phone:{rules:[{required:true,errorMessage:'请输入联系方式'},{pattern:/^1[3-9]\d{9}$/, errorMessage:'手机号格式错误'}]},
  province: {rules:[{required:true,errorMessage:'请选择所在省份'}]},
  detailAddress: {rules:[{required:true,errorMessage:'请输入详细地址'}]},
}

const formRef = ref<UniHelper.UniFormsInstance>()
// 修改/新增数据
const handleConfirm = async() => {
  try{
    await formRef.value?.validate?.()
    if(query.id){
      // 修改
      await updateAddressInfoApi(query.id, form.value)
    }else{
      // 新增
      await addAddressInfoApi(form.value)
    }
    uni.showToast({title:query.id? '修改成功':'新增成功',icon: 'success'})
    setTimeout(() => {
      uni.navigateBack()
    }, 400)
  }catch(error){
    uni.showToast({title:'请填写完整信息',icon: 'error'})
  }
}

uni.setNavigationBarTitle({title: query.id? '修改地址':'新建地址'})

onLoad(() => getAddressInfoData())
</script>

<template>
  <view class="content">
    <uni-forms :rules="rules" ref="formRef" :model="form">
      <!-- 表单内容 -->
      <uni-forms-item name="name" class="form-item">
        <text class="label">收货人</text>
        <input class="input" placeholder="请填写收货人姓名" v-model="form.name" />
      </uni-forms-item>
      <uni-forms-item name="phone" class="form-item">
        <text class="label">手机号码</text>
        <input class="input" placeholder="请填写收货人手机号码" v-model="form.phone" :maxlength="11"/>
      </uni-forms-item>
      <uni-forms-item name="province" class="form-item">
        <text class="label">所在地区</text>
        <picker class="picker" mode="region" :value="[form.province,form.city,form.region]" @change="onRegionChange">
          <view v-if="form.province && form.city && form.region">{{form.province}} {{ form.city }} {{ form.region }}</view>
          <view v-else class="placeholder">请选择省/市/区(县)</view>
        </picker>
      </uni-forms-item>
      <uni-forms-item name="detailAddress" class="form-item">
        <text class="label">详细地址</text>
        <input class="input" placeholder="街道、楼牌号等信息" v-model="form.detailAddress" />
      </uni-forms-item>
      <uni-forms-item class="form-item">
        <label class="label">设为默认地址</label>
        <switch class="switch" color="#f13e1f" :checked="form.defaultStatus === 0" @change="onSwitchChange"/>
      </uni-forms-item>
    </uni-forms>
  </view>
  <!-- 提交按钮 -->
  <button class="button" @tap="handleConfirm">保存并使用</button>
</template>

<style lang="scss">
page {
  background-color: #f4f4f4;
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item,
  .uni-forms-item {
    display: flex;
    align-items: center;
    min-height: 96rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    margin-bottom: 0;

    // 调整 uni-forms 样式
    .uni-forms-item__content {
      display: flex;
    }

    .uni-forms-item__error {
      margin-left: 200rpx;
    }

    &:last-child {
      border: none;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .switch {
      position: absolute;
      right: -20rpx;
      transform: scale(0.8);
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }
}

.button {
  height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #f13e1f;
}
</style>